import { Table } from 'antd';
import React, { useEffect, useState } from 'react';
import _ from 'lodash';
import { DIVISOR_MONEY, FIXED_MONEY, RenderNumber } from '@/utils/buildReturnValue';

export default function SubComponentsOne({ data }) {
  const [dataSource, setDataSource] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    setDataSource([]);
    setColumns([]);
    if (!_.isEmpty(data)) {
      const arr = [];
      const obj = {
        key: 1,
      };
      _.forEach(data, item => {
        arr.push({
          key: item.year,
          title: item.year,
          children: [
            {
              title: '审批通过',
              dataIndex: `${item.year}-successApproved`,
              key: `${item.year}-successApproved`,
              align: 'right',
              render: text => <RenderNumber value={text / DIVISOR_MONEY} precision={FIXED_MONEY} />,
            },
            {
              title: '审批中',
              dataIndex: `${item.year}-approved`,
              key: `${item.year}-approved`,
              align: 'right',
              render: text => <RenderNumber value={text / DIVISOR_MONEY} precision={FIXED_MONEY} />,
            },
            {
              title: '合计（含本项目）',
              dataIndex: `${item.year}-total`,
              key: `${item.year}-total`,
              align: 'right',
              render: text => <RenderNumber value={text / DIVISOR_MONEY} precision={FIXED_MONEY} />,
            },
          ],
        });

        Object.getOwnPropertyNames(item).forEach(key => {
          obj[`${item.year}-${key}`] = item[key];
        });
      });
      setColumns(arr);
      setDataSource([obj]);
    }
  }, [data]);
  if (_.isEmpty(data)) return <></>;
  return (
    <div className="approve-box-content-paragraph">
      <div className="approve-box-content-paragraph-title">区域年度回款目标(万元)</div>
      <Table size="middle" bordered dataSource={dataSource} columns={columns} pagination={false} />
    </div>
  );
}
